<template>
  <div class="process-title-box">
    <div class="process-title__name">
      <icon-font :type="icon" />
      <span>{{ name }}</span>
    </div>
    <!-- 右边图标按钮 -->
    <div class="process-title__btn">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'processTitle',
    props: {
      icon: {
        type: String,
        default: 'vp-liuchengyuce'
      },
      name: {
        type: String,
        default: '流程预测'
      }
    }
  };
</script>

<style lang="scss" scoped>
  .process-title-box {
    line-height: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    
    .process-title__name {
      display: flex;
      align-items: center;
      i {
        font-size: 22px;
        margin-right: 6px;
        color: #0078fd;
        color: var(--theme-brand6, #0078fd);
      }
      span {
        font-size: 16px;
        color: #333;
        font-weight: 600;
      }
    }
    .process-title__btn {
      i {
        color: #595959;
        font-size: 16px;
      }
    }
  }
</style>
